<template>
    <div class="printable">
        <div v-if="tableTitle" class="printable-content" id="printMer" >
          <div v-if="tableTitle === '区级重点项目资金预算指标追加审批表'" class="printable-content-code">
            <div>
              <span>科室编号:</span>
              <span></span>
            </div>
            <div>
              <span>预算编号:</span>
              <span></span>
            </div>
          </div>
          <!--//todo 表格标题 -->
          <div class="printable-content-head">
            <span>
              {{ tableTitle }}
            </span>
          </div>
          <!-- //todo 盖章&&时间 -->
          <div v-if="isShowChapter" class="printable-content-chapter">
            <div>
              <span>申请单位(盖章): </span>
              <span>{{getCollectListData['enterpriseName']}}</span>
            </div>
            <div>
              <span>申请日期: </span>
              <span>{{getCollectListData['sqYear']}}</span>
            </div>
          </div>
          <!--//todo 表格内容  -->
          <div class="print-table">
            <!-- //todo 行内元素 -->
            <div
              v-for="(items, index) in getTableColunmsInline"
              :key="index"
              :style="isHide(items) && 'position: absolute;opacity: 0;'"
              class="print-table-inline-content">
                <div
                  v-for="(item, index1) in items"
                  :key="index1"
                  :style="`flex:${item.width};`"
                  class="print-table-inline-colunm">
                  <!-- ${item.hide && 'outline:none;'} -->

                  <template v-if="!item.clounms && !(item.width === 0) && !item.hide">
                    <div
                    :style="{width: item.labelWidth + 'px',height: item.control && item.height + 'px'}"
                    class="print-table-inline-colunm-label print-table-inline-colunm-label-tz">
                      {{item.label}}
                    </div>
                    <div class="print-table-inline-colunm-content" :style="item.children && 'padding:0;'">
                      <div class="print-table-inline-colunm-content-children" v-if="item.children">
                        <div class="print-table-inline-colunm-content-children-item" :style="item.children && 'padding:0;'" v-for="(child, index2) in item.children" :key="index2">
                          <div :style="child.width && ('flex:' + child.width)">{{child.label}}</div>
                          <div >{{getCollectListData[child.textKey] || ''}}</div>
                        </div>
                      </div>
                      <div class="print-table-content" v-else>{{ getCollectListData[item.textKey] || '' }}</div>
                    </div>
                  </template>

                  <template v-else>
                    <template v-if="item.clounms">
                        <div class="print-table-inline-colunm" :style="{width: '100%',height:item.height + 'px'}" v-for="(itemC, index2) in item.clounms" :key="index2" >
                          <div
                            :style="{width: item.labelWidth + 'px'}"
                            class="print-table-inline-colunm-label">
                              {{itemC.label}}
                            </div>
                          <div class="print-table-inline-colunm-content" style="padding: 0;">
                            <div class="print-table-inline-colum-child-content" v-if="itemC.children">
                              <div class="print-table-inline-colum-child-item"  v-for="(child,index3) in itemC.children" :key="index3">
                                <div
                                  :style="{width: child.labelWidth + 'px'}"
                                  class="print-table-inline-colunm-label">
                                    {{child.label}}
                                  </div>
                                  <div class="print-table-inline-colunm-content print-table-content" >{{ getCollectListData[child.textKey] || '' }}</div>
                              </div>
                            </div>
                            <div class="print-table-content" v-else>{{ getCollectListData[itemC.textKey] || '' }}</div>
                          </div>
                        </div>
                    </template>
                  </template>
                </div>
            </div>
            <!-- //todo  块级元素 -->
            <div class="print-table-row-content" >
              <div
                v-for="(item, index) in getTableColunmsRow"
                :key="index"
                :style="{height: item.height + 'px'}"
                :class="`print-table-row-content-item ${item.labelWidth === 'half' && 'print-table-row-half'}`">
                <template v-if="item.labelWidth !== 0">
                  <template v-if="item.children">
                    <div class="print-table-row-content-children-content"
                    :style="{
                      width: typeof item.labelWidth === 'string'
                        ?
                          item.labelWidth
                            : item.labelWidth + 'px'}">
                      <div class="print-table-row-content-children-label">{{item.label}}</div>
                      <div class="print-table-row-content-children">
                        <div
                          v-for="(child, index2) in item.children"
                          :key="index2"
                          class="print-table-inline-row-child">
                          <span>{{child.label}}</span>
                        </div>
                      </div>
                    </div>
                  </template>
                  <template v-else>
                    <div :class="`print-table-inline-row-label`"
                    :style="{
                      width: typeof item.labelWidth === 'string'
                        ?
                          item.labelWidth
                            : item.labelWidth + 'px'}">
                        <span>{{item.label}}</span>
                    </div>
                  </template>
                </template>
                  <div :class="
                  `
                  print-table-inline-colunm-content print-table-row-content-item
                  ${item.children && 'print-table-row-content-item-children'}
                  ${item.content && item.content.showSign && item.content.showSign.showLineTop && 'print-border-content'}
                  `
                  ">
                    <div class="print-table-row-content-item-body">
                      <!-- //todo 情况说明 -->
                      <div class="print-table-row-content-item-body-reason" v-if="item.content && item.content.showReason" >
                        <span>{{item.content.showReason.label}}</span>
                        <span>{{ getCollectListData[item.content.showReason.textKey] }}</span>
                      </div>
                      <!-- //todo 签字 -->
                      <div :class="`print-table-row-content-item-body-sign ${item.content.showSign.showLineTop && 'print-border-top'}`" v-if="item.content && item.content.showSign">
                        <div v-for="(sign, index1) in item.content.showSign.values" :key="index1">
                          <div>
                            <span>{{sign.label}}</span>
                            <span class="print-table-row-content-item-body-sign-place">{{ getCollectListData[sign.textKey] || ''}}</span>
                          </div>
                        </div>
                      </div>
                      <!-- //todo 普通容器-->
                      <div class="print-table-row-content-item-body-normal" v-if="item.content && item.content.showNormal">
                        <span>{{ getCollectListData[item.textKey] }}</span>
                      </div>
                      <div class="print-table-row-content-item-body-normal-child-xxxx" v-if="item.children">
                        <div class="print-table-row-content-item-body-normal-child"
                              v-for="(child, index2) in item.children"
                              :key="index2"
                              >
                          <div style="position:relative;">
                            <span>{{ getCollectListData[child.textKey] }}</span>
                            <div class="print-table-row-content-item-body-normal-child-signs" v-if="child.showSign">
                              <div v-for="(sign,signIndex) in child.showSign.values" :key="signIndex">
                                {{sign.label}}
                              </div>
                            </div>
                            <div v-if="child.showChapter" class="item-row-content-child-chapter">(盖章)</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
              </div>
            </div>
          </div>

        </div>
        <!-- -------- -->
        <div class="printable-others">
          <Select-Table-Dialog
          :visible="isShowDialog"
          :title="getTitle"
          :types="getZhibiaoType"
          :resourceCateName="getResourceCateName"
          :tableId="getTableId"
          @closeDialog="isShowDialog = false"
          @ok="ok"
           />
          <div>
              <a-button @click="pageChange('incre')" class="print-btn btn" >
                上一条
              </a-button>
              <span class="print-page" >{{rowNow + 1}}/{{dataLists.length}}</span>
              <a-button @click="pageChange('add')" class="print-btn btn" >
                下一条
              </a-button>
              <div>
              <a-button class="print-btn-pri btn"  v-print="'#printMer'" type="primary">
                打 印
              </a-button>
              </div>
          </div>
           <span class="print-tip" >(打印的可能存在多行，请按需打印)</span>
        </div>
    </div>
</template>

<script>
import SelectTableDialog from './components/SelectTableDialog'
import {
  tableMap,
  tableType,
  showChapters,
  flagMap,
  digitUppercase
} from './tableData'
import { getInstanceOpinion } from "@/api/approve/approve";
import {
    getParams
} from "@/utils";


export default {
  data() {
    return {
      tableTitle: '',
      //sublist 存在多行时的选择
      rowNow: 0,
      tableMap,
      dataLists:[],
      ysData:{},  //原始数据
      //流程日志(只记录科室长与当前经办人)
      instanceOpinion:{},
      // enterpriseText
      // 是否显示盖章
      isShowChapter: false,
      isShowDialog: false,
    }
  },
  props:{
    bpmAction: {
      type: Object,
      default(){
        return {}
      }
    },
    TableContext: {
      type: Object,
      default(){
        return {}
      }
    },
    bpmActionAddOfUpData: {
      type: Object,
      default(){
        return {}
      }
    },
  },
  // inject:['TableContext','bpmActionAddOfUpData'],
  methods: {
    isHide(data){
      return data.some(item => {
        return item.hide === true
      })
    },
    pageChange(type){
      if (type === 'incre') {
        this.rowNow > 0 && (this.rowNow = this.rowNow - 1);
      }else{
        ((this.rowNow + 1) < this.dataLists.length) && (
          this.rowNow = this.rowNow + 1

        )
      }
      this.$forceUpdate()
    },
    //分类
    getDataType(target, prop){
      const arr = [];
      for(const key in target){
        if (target[key].type === prop) {
          arr.push(target[key]);
        }
      }

      return arr
    },
    //行内元素分页
    getInlineGroupByIndex(target, num){
      const resArr = [];
      target.forEach((item, index) => {
        const page = Math.floor(index / num);
        !resArr[page] && (resArr[page] = []);
        resArr[page].push(item);
      })
      return resArr
    },
    editDataInLists(item){
      item.proNameAndSubject = `${item.programName} ${item.functionSectionText}`;
      item.buyCatalogName = item.isBuy === 0 ? '非采购' : item.buyCatalogName;
      item.isBuy1 = item.isBuy === 0 ? '否' : '是';
      item.bMoney1 = item.bMoney ? item.bMoney + '元' : '';
      item.createTime && (item.sqYear = item.createTime.split(' ')[0]);
      item.bMoney && (item.bigBMoney = digitUppercase(item.bMoney));
      item.enterpriseText && (item.enterpriseCode = item.enterpriseText.split(' ')[0])
      if (Object.keys(this.ysData).length) {
        item.oldEnterprise = this.ysData.enterpriseText;
        item.tjSubject = item.functionSectionText + ' ' + this.ysData.economySectionText;
        item.tzSubject = item.economySectionText + ' ' + this.ysData.ecoGovText;
      }
    },
    ok(value){
      this.tableTitle = value;
    },
    //判断表格
    judgeTable(id){
      id && (
          this.isShowDialog = true,
          this.getInstanceOpinion()
        );
      return flagMap[id]
    },
    //收集data内某个字段数据
    collectDataCloum(cloum){
      const res = []
      this.getDataLists && (
        this.getDataLists.forEach(item => {
          const name = item[cloum];
          if (res.indexOf(name) === -1) {
            res.push(name);
          }
        })
      )
      return res
    },
    //获取流程日志
    getInstanceOpinion(){
      getInstanceOpinion({
        instId: this.getInstId
      }).then(res => {
        const content = [];
        if (res.code === 200 && res.success) {
          const data = res.data;
          data.map(item => {
            if (item.taskName.includes('科室长')) {
              content.push(
                {
                  KSZName:item.approverName,
                  KSZOpinion:item.opinion,
                }
              )
            }
            if (item.taskName.includes('经办人')) {
              content.push(
                {
                  JBRName:item.approverName,
                  JBROpinion:item.opinion,
                }
              )
            }
          })
        }
        content.forEach(item => {
          this.instanceOpinion = {
            ...this.instanceOpinion,
            ...item
          }
        })
      })
    }
  },
  computed:{
    getTableType(){
      for(const key in tableType){
        if (typeof tableType[key] === 'string') {
          if (this.tableTitle.includes(tableType[key])) {
            return key
          }
        }else{
          for(const item of tableType[key]){
            if (this.tableTitle.includes(item)) {
              return key
            }
          }
        }
      }
      return 1
    },
    //以二维数组形式获取行内元素
    getTableColunmsInline(){
      const lineArr =  this.getDataType(this.tableMap[this.getTableType],'in')
      // 特殊表单特殊处理
      if (this.getTableType === 'pftjsp') {
        const functionSectionText = this.ysData.enterpriseText || '';
        const flag = this.dataLists.every(item => {
          return item.enterpriseText = functionSectionText
        })
        if (flag) {
          const arr = ['单位之间调剂'];
          lineArr.forEach((item, index) => {
            if (arr.indexOf(item.label) !== -1) {
              item.hide = true;
              lineArr[index + 1].hide = true;
            }
          })
        }else{
          const arr = ['单位内部调剂'];
          lineArr.forEach((item, index) => {
            if (arr.indexOf(item.label) !== -1) {
              item.hide = true;
              lineArr[index + 1].hide = true;
            }
          })
        }
      }
      return this.getInlineGroupByIndex(lineArr, 2)  //当前布局都是根据2来的，改掉的话需要推翻后面
    },
    //bloack元素的数组
    getTableColunmsRow(){
      return this.getDataType(this.tableMap[this.getTableType],'row')
    },
    getDataColums(){
      return this.TableContext?.detailAdjustmentColumns || [];
    },
    getDataLists(){
      // return this.TableContext?.detailAdjustmentData || [];
      return this.dataLists;
    },
    getCollectData(){
      return {
        ...getParams()
      }
    },
    getCollectListData(){
      return {
        ...this.bpmActionAddOfUpData,
        ...this.getDataLists[this.rowNow],
        ...this.instanceOpinion
      }
    },
    getTitle(){
      return this.judgeTable(this.getTableId)
    },
    getTableId(){
      return this.getCollectData?.tableId || ''
    },
    getZhibiaoType(){
      return this.collectDataCloum('budgetCategoryName')
    },
    //资金来源
    getResourceCateName(){
      return this.collectDataCloum('resourceCateName')
    },
    //instId
    getInstId(){
      return this.bpmAction.instanceId
    }
  },
  watch: {
    'TableContext.detailAdjustmentData': {
      handler:function(value) {
          if (value) {
            const lists = JSON.parse(JSON.stringify(value))
            // const lists = cloneUtil(value)
            lists.forEach(item => {
              this.editDataInLists(item);
              this.dataLists.push({...item});
            })
        }
        this.$forceUpdate()
      },
      deep: true
    },
    'tableTitle': {
      handler:function() {
        // 是否显示盖章
        if (showChapters.indexOf(this.getTableType) !== -1) {
          this.isShowChapter = true
        }
      }
    },
    'getZhibiaoType': {
      handler:function() {
        //取到数据了
        this.judgeTable()
        if (this.dataLists.length) {
          if (this.dataLists[0] && this.dataLists[0].budgetType === 1) {
            this.ysData = this.dataLists.shift()
            this.dataLists.forEach(item => {
            this.editDataInLists(item)
          })
          }
        }
      }
    }
  },
  components:{
    SelectTableDialog
  }
}
</script>

<style scoped>
.printable{
  width: 100%;
  height: auto;
  min-height: 100%;
  position: relative;
  background-color: #fff;
  --line-color: rgba(0, 0, 0, 0.5);
}
.printable-content{
  width: calc(100% - 24px);
  margin-left: 12px;
  padding: 20px 0;
  max-height: 1100px;
}
/* 表标题 */
  .printable-content-code{
    text-align: right;
  }
  .printable-content-code > div{
    margin: 0 150px;
  }
  .printable-content-head{
    text-align: center;
    font-size: 32px;
    padding-bottom: 5px;
  }
  .printable-content-chapter{
    width: calc(100% - 24px);
    margin-left: 12px;
    display: flex;
    justify-content: space-between;
    padding: 10px 24px 0 24px;
  }
/* ------------------------------------------- */
.print-table-content{
  position: absolute;
  padding: 5px;
  width: 100%;
}
/* 行内元素 */
.print-table-inline-content{
  display: flex;
  width: calc(100% - 24px);
  margin-left: 12px;
  outline: 1px solid rgba(0, 0, 0, 0.5);
  /* border: 1px solid rgba(0, 0, 0, 0.5); */
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  border-left: 1px solid rgba(0, 0, 0, 0.5);
  border-right: 1px solid rgba(0, 0, 0, 0.5);
}
/* 行内元素的一行 */
.print-table-inline-colunm{
  display: flex;
}

.print-table-inline-colunm-content,
.print-table-inline-colunm-label{
  outline: 1px solid rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  /* padding: 12px 24px; */
  padding: 12px;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
}
.print-table-inline-colunm-content-children{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.print-table-inline-colunm-content-children-item{
  flex:1;
  display: flex;
  padding: 12px 0;
}
.print-table-inline-colunm-content-children-item > div{
  display: flex;
  align-items: center;
  outline: 1px solid rgba(0, 0, 0, 0.5);
  flex:1;
  padding: 8px;
}
.print-table-inline-colunm-content-children-item > div:first-child{
  text-align: center;
}
/* .print-table-inline-colunm-label-tz{
  padding: 32px 12px;
} */
.print-table-inline-colum-child-content{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.print-table-inline-colum-child-item{
  flex: 1;
  display: flex;
  align-items: center;
}
/* 块级元素 */
.print-table-row-content{
  width: calc(100% - 24px);
  margin-left: 12px;
  outline: 1px solid rgba(0, 0, 0, 0.5);
  /* border: 1px solid rgba(0, 0, 0, 0.5); */
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  border-left: 1px solid rgba(0, 0, 0, 0.5);
  border-right: 1px solid rgba(0, 0, 0, 0.5);
}
.print-table-inline-row-label{
  display: flex;
  align-items: center;
  justify-content: center;
  outline: 1px solid rgba(0, 0, 0, 0.5);
  padding: 12px;
}
.print-table-row-content-item{
  display: flex;
  outline: 1px solid rgba(0, 0, 0, 0.5);
}
.print-table-row-half > div {
  width: 50% !important;
}
.print-table-row-content-item-body{
  width: 100%;
  height: 100%;
  position: relative;
}
.print-table-row-content-item-body-sign{
  position: absolute;
  bottom: -10px;
  display: flex;
  justify-content: space-between;
  right: 0;
  left: 0;
}
.print-border-content{
  padding: 0;
}
.print-border-top{
  border-top: 1px solid rgb(206, 206, 206);
  bottom: 0;
  padding: 0 12px;
}
.print-table-row-content-item-body-sign-place{
  display: inline-block;
  min-width: 120px;
}
.print-table-row-content-item-body-normal{
  height: 100%;
  display: flex;
  align-items: center;
}
/* 带children的块级元素 */
.print-table-row-content-children-content{
  display: flex;
}
.print-table-row-content-children-label{
  display: flex;
  text-align: center;
  align-items: center;
  outline: 1px solid rgba(0, 0, 0, 0.5);
  flex:1.5;
}
.print-table-row-content-children{
  flex:2;
  display: flex;
  flex-direction: column;
}
  .print-table-inline-row-child{
    flex: 1;
    outline: 1px solid rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .print-table-row-content-item-children{
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
  }
  .print-table-row-content-item-body-normal-child-xxxx{
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .print-table-row-content-item-body-normal-child-signs{
    position: absolute;
    bottom: 0;
    width: 90%;
    display: flex;
    justify-content: space-between;
    padding-right: 140px;
  }
  .print-table-row-content-item-body-normal-child{
    flex:1;
    outline: 1px solid rgba(0, 0, 0, 0.5);
  }
  .print-table-row-content-item-body-normal-child > div{
    padding: 14px 12px;
    display: inline-flex;
    width: 100%;
    height: 100%;
  }
  .item-row-content-child-chapter{
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 5px 15px;
  }
  /* ------------------------------------------ */
  /* 去除打印时的页眉、页脚 */
  @media print {
  @page{
      size:  auto;
      margin: 3mm;
	}
  .print-table-inline-content{
    overflow: hidden;
  }
}
</style>

<style lang="less" scoped>
.printable{
  display: flex;
  height: auto;
  justify-content: center;
  .printable-content{
    // display: none;
    width: 750px;
  }
  .print-table-inline-content{
    overflow: hidden;
  }
  .printable-others{
    display: flex;
    flex-direction: column;
    margin-top: 80px;
    margin-left: 40px;
    .print-page{
      font-size: 20px;
      font-weight: 600;
      padding: 0 12px;
    }
    .btn{
      font-size: 18px;
      height: 50px;
    }
    .print-btn{
      color: #40a9ff;
      border-color:#40a9ff;
    }
    .print-btn-pri{
      padding: 0 50px;
      margin: 20px 0;
      width: 100%;
    }
    .print-tip{
      text-align:center;
    }
  }
}
</style>
